<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="zh">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
	<title>商家管理之增加商家</title>
	<link rel="icon" href="${pageContext.request.contextPath}/static/admin/favicon.ico" type="image/ico">
	<meta name="keywords" content="后台模板,后台管理系统,HTML模板">
	<meta name="description" content="基于Bootstrap的后台管理系统模板">
	<meta name="author" content="www.bootstrapmb.com">
	<link href="${pageContext.request.contextPath}/static/admin/css/bootstrap.min.css" rel="stylesheet">
	<link href="${pageContext.request.contextPath}/static/admin/css/fonts.css" rel="stylesheet">
	<!--标签插件-->
	<link rel="stylesheet"
		  href="${pageContext.request.contextPath}/static/admin/js/jquery-tags-input/jquery.tagsinput.min.css">
	<link href="${pageContext.request.contextPath}/static/admin/css/style.css" rel="stylesheet">
</head>

<body>
<!--页面主要内容-->
<main class="ftdms-layout-content">

	<div class="container-fluid" style="margin-bottom:90px;">
		<button type="button" class="btn btn-success" onclick="chartOne()">饼状图显示</button>
		<button type="button" class="btn btn-success" onclick="chartTwo()">柱状图显示</button>
	</div>
	<%--饼状图显示--%>
	<div id="main1" style="margin-left: 50px;height: 600px;width: 600px;float:left;"></div>
	<%--柱状图显示--%>
	<div id="main2" style="margin-left: 50px;height: 600px;width: 600px;float:left;"></div>
</main>
<!--End 页面主要内容-->
</div>
</div>

<script type="text/javascript" src="${pageContext.request.contextPath}/static/admin/js/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/admin/js/bootstrap.js"></script>
<script type="text/javascript"
		src="${pageContext.request.contextPath}/static/admin/js/perfect-scrollbar.min.js"></script>
<!--标签插件-->
<script src="${pageContext.request.contextPath}/static/admin/js/jquery-tags-input/jquery.tagsinput.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/admin/js/main.min.js"></script>
<script>
	//图表显示
	function chartOne(){
		$.post("${pageContext.request.contextPath}/admin/chartfirst.action",function(data){
			console.log(data);
			var chartDom = document.getElementById('main1');
			var myChart = echarts.init(chartDom);
			var option;
			option = {
				series : [
					{
						name: '帖子数量',
						type: 'pie',
						radius: '55%',
						data: data
					}
				]
			};
			option && myChart.setOption(option);
		},"json");
	}
	//柱状图显示
	function chartTwo(){
		$.post("${pageContext.request.contextPath}/admin/chartsecode.action",function(data){
			var chartDom = document.getElementById('main2');
			var myChart = echarts.init(chartDom);
			var option;
			console.log(data.names);
			console.log(data.values);
			option = {
				title: {
					text: '用户帖子'
				},
				tooltip: {},
				legend: {
					data:['数量']
				},
				xAxis: {
					data: data.names
				},
				yAxis: {},
				series: [{
					name: '数量',
					type: 'bar',
					data: data.values
				}]
			};
			option && myChart.setOption(option);
		},"json");
	}
</script>
</body>

</html>